<template>
  <div class="packages">
    <div class="container">
      <div class="aside">
        <div ref="refsTable">
          <el-form :model="leftQueryParams" ref="leftQueryForm" :inline="true" style="" label-width="68px">
            <el-form-item label="登记日期">
              <el-date-picker v-model="dateRange" style="width:354px" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="daterange"
                range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
            </el-form-item>

            <el-form-item label="外包商" prop="outsourceId" label-width="70px">
              <el-select v-model="leftQueryParams.outsourceId" clearable placeholder="请选择外包商" style="width:190px">
                <el-option value label="全部"></el-option>
                <el-option v-for="item in outsourcersList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label-width="0">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleLeftQuery">查询</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetLeftQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <el-row :gutter="10" class="mb8" type="flex" justify="space-between">
            <el-col :span="1.5">

            </el-col>
            <el-col :span="1.5">
              <el-dropdown trigger="click">
                <el-button type="primary" size="mini">
                  导出<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="handleLeftExport('now')">导出当前</el-dropdown-item>
                  <el-dropdown-item @click.native="handleLeftExport('all')">导出全部</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </div>
        <el-table stripe border highlight-current-row :data="leftList" v-loading="leftLoading" :height="heights"
          :header-cell-style="{
            background: '#ebebeb'
          }">
          <el-table-column type="index" align="center" label="序号"></el-table-column>
          <af-table-column align="center" label="外包商" prop="outName">
          </af-table-column>
          <af-table-column prop="totalCount" align="center" label="总量"></af-table-column>
        </el-table>
        <div>
          <pagination  style="margin:0;padding: 0;" :total="leftTotal"
            :page.sync="leftQueryParams.pageNum" :limit.sync="leftQueryParams.pageSize" @pagination="getLeftList" />
        </div>

      </div>
      <div class="main">
        <div ref="refsTable1">
          <el-form :model="rightQueryParams" ref="rightQueryForm" :inline="true" label-width="70px">

            <el-form-item label="外包商" label-width="55px" prop="outsourceId">
              <el-select v-model="rightQueryParams.outsourceId" clearable placeholder="请选择外包商" style="width:210px">
                <el-option value label="全部"></el-option>
                <el-option v-for="item in outsourcersList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="项目类型" prop="projectTypeId">
              <el-autocomplete
            class="inline-input"
            v-model="rightQueryParams.projectType"
            :fetch-suggestions="querySearch"
            placeholder="请选择"
            @select="handleSelectProject"
            @focus="change(0)"
            style="width:210px"
            clearable
          ></el-autocomplete>
              <!-- <el-select v-model="rightQueryParams.projectTypeId" clearable placeholder="请选择项目类型" style="width:210px">
                <el-option value label="全部"></el-option>
                <el-option v-for="item in projectTypeList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select> -->
            </el-form-item>
            <el-form-item label-width="0">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleRightQuery">查询</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetRightQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <el-row :gutter="10" class="mb8" type="flex" justify="space-between">
            <el-col :span="1.5">


            </el-col>
            <el-col :span="1.5">
              <el-dropdown trigger="click">
                <el-button type="primary" size="mini">
                  导出<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="handleRightExport('now')">导出当前</el-dropdown-item>
                  <el-dropdown-item @click.native="handleRightExport('all')">导出全部</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </div>
        <el-table stripe border highlight-current-row :data="rightList" v-loading="rightLoading" :height="heights1"
          :header-cell-style="{
            background: '#ebebeb'
          }">
          <el-table-column type="index" align="center" label="序号"></el-table-column>
          <af-table-column align="center" label="外包商" prop="outName">
          </af-table-column>
          <af-table-column prop="projectTypeName" align="center" width="350" label="项目类型"></af-table-column>
          <af-table-column prop="laboratoryProGroupName" align="center" label="专业组"></af-table-column>
          <af-table-column prop="typeCount" align="center" label="项目类型总量"></af-table-column>
        </el-table>
        <div>
          <pagination  style="margin:0;padding: 0;" :total="rightTotal"
            :page.sync="rightQueryParams.pageNum" :limit.sync="rightQueryParams.pageSize" @pagination="getRightList" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { outsourceListStatistics, outsourceStatistics } from '@/api/statisticalManagement/outsourcers'
import { outsourcers } from '@/api/tree/outsourcers'
import { projectType } from '@/api/dictionary/systemDictionary/projectType'
import { arr, Arr } from "@/utils/data.js";
export default {
  name: 'outsourcers',
  data () {
    return {
      pickerOptions: {
        disabledDate(time){
          return time.getTime()>Date.now()
        },
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      // 遮罩层
      leftLoading: true,
      rightLoading: true,
      leftQueryParams: {
        pageNum: 1,
        pageSize: 20,
        inspectionUnit: undefined,
        outsourceId:''
      },
      rightQueryParams: {
        pageNum: 1,
        pageSize: 20,
        inspectionUnit: undefined,
        outsourceId:'',
        projectTypeId:''

      },
      // 表单参数
      form: {},
      // 申请日期范围
      dateRange: [],
      rightList: [],
      projectTypeList: [],
      leftList: [],
      rightTotal: 0,
      leftTotal: 0,
      platformTypeList: [
        {
          title: '微生物',
          id: 1
        },
        {
          title: '肿瘤',
          id: 2
        },
        {
          title: '科研',
          id: 3
        }
      ],
      //外包商
      outsourcersList: [],
      heights: undefined,
      heights1: undefined,
      sampleTypeList2:[],
      projectTypeList2:[],
      restaurants: [],
    }
  },
  created () {
    Arr.sampleTypeArr.map(el=>{
      this.sampleTypeList2.push({
        value:el.name,
        id:el.id
      })
    })
   Arr.projectTypeArr.map(el=>{
      this.projectTypeList2.push({
        value:el.name,
        id:el.id
      })
    })  
    this.dateRange[0] = this.parseTime((new Date(new Date().toLocaleDateString()).getTime()))
    this.dateRange[1] = this.parseTime(new Date(new Date().toLocaleDateString()).getTime())
    this.getLeftList()
    this.getRightList()
    this.otherList()
  },
  mounted () {
    this.$nextTick(() => {
      // 根据浏览器高度设置初始高度
      this.heights = window.innerHeight - this.$refs.refsTable.offsetHeight - 190

      this.heights1 = window.innerHeight - this.$refs.refsTable1.offsetHeight - 190
      // 监听浏览器高度变化，修改表格高度
      window.onresize = () => {
        this.heights = window.innerHeight - this.$refs.refsTable.offsetHeight - 190

        this.heights1 = window.innerHeight - this.$refs.refsTable1.offsetHeight - 190
      }
    })
  },
  methods: {
    handleSelectProject(item){
      this.rightQueryParams.projectTypeId=item.id
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    // 多个下拉框的数据
    loadAll() {
      const array = [
        this.projectTypeList2,
      ];
      return array;
    },
    handleSelect(item) {
      console.log(item);
    },
    // 聚焦下拉框时
    change(i) {
      this.restaurants = this.loadAll()[i];
      // console.log(this.restaurants);
    },
    /** 查询迟发列表 */
    getLeftList () {
      this.leftLoading = true
      outsourceStatistics(this.addParameter(this.leftQueryParams, this.dateRange)).then((response) => {
        this.leftList = response.rows
        this.leftTotal = response.total
        this.leftLoading = false
      })
    },
    getRightList () {
      this.rightLoading = true
      outsourceListStatistics(this.rightQueryParams).then((response) => {
        this.rightList = response.rows
        this.rightTotal = response.total
        this.rightLoading = false
      })
    },
    otherList () {
      outsourcers().then(response => {
        this.outsourcersList = response.rows
      })
      projectType().then(response => {
        this.projectTypeList = response.rows
      })
    },

    addParameter (params, dateRange) {
      var search = params
      search.startRegisterTime = ''
      search.endRegisterTime = ''
      if (null != dateRange && '' != dateRange) {
        search.startRegisterTime = dateRange[0]
        search.endRegisterTime = dateRange[1]
      }
      return search
    },
    handleLeftQuery () {
      this.leftQueryParams.pageNum = 1
      this.rightQueryParams.outsourceId = this.leftQueryParams.outsourceId
      this.getLeftList()
      this.handleRightQuery()
    },
    resetLeftQuery () {
      this.dateRange = []
      this.resetForm('leftQueryForm')
      this.handleLeftQuery()
    },
    handleRightQuery () {
      this.rightQueryParams.pageNum = 1
      this.getRightList()
    },
    resetRightQuery () {
      this.resetForm('rightQueryForm')
      this.handleRightQuery()
    },
    // /** 导出按钮操作 */
    handleLeftExport (e) {
      var different = ''
      var params = ''
      if (e === 'now') {
        different = '当前'
        params = this.addParameter(this.leftQueryParams, this.dateRange) //对应接口参数
      } else if (e === 'all') {
        different = '所有'
        params = null
      } else {
        return
      }
      let that = this
      let loading
      this.$confirm('是否确认导出' + different + '数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        loading = that.$loading({
          lock: true,
          text: '导出中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        outsourceStatistics(params).then((response) => {
          let mydata = [
            [
              '序号',
              '外包商',
              '总量',
            ],
            ...response.rows.map((item, index) => ([
              index + 1,
              item.outName,
              item.totalCount,
            ]))
          ]
          let requireMerge = []
          that.$util.createxlsx({
            mydata,
            fileName: '外包商统计',
            dataList: response.rows,
            type: 'orderId',
            requireMerge,
            loading
          })
        })
      }).catch(function () { })
    },
    // /** 导出按钮操作 */
    handleRightExport (e) {
      var different = ''
      var params = ''
      if (e === 'now') {
        different = '当前'
        params = this.rightQueryParams //对应接口参数
      } else if (e === 'all') {
        different = '所有'
        params = null
      } else {
        return
      }
      let that = this
      let loading
      this.$confirm('是否确认导出' + different + '数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        loading = that.$loading({
          lock: true,
          text: '导出中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        outsourceListStatistics(params).then((response) => {
          let mydata = [
            [
              '序号',
              '外包商',
              '项目类型',
              '专业组',
              '项目类型总量',
            ],
            ...response.rows.map((item, index) => ([
              index + 1,
              item.outName,
              item.projectTypeName,
              item.laboratoryProGroupName,
              item.typeCount,
            ]))
          ]
          let requireMerge = []
          that.$util.createxlsx({
            mydata,
            fileName: '外包商统计',
            dataList: response.rows,
            type: 'orderId',
            requireMerge,
            loading
          })
        })
      }).catch(function () { })
    },
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 10px !important;
}

.packages {
  // height: 85vh;
  position: relative;
  padding: 10px;
  margin-top: 10px;
  background-color: #fff;

  .container {
    height: 87.5vh;
    border: 1px solid rgb(220, 223, 230);
    border-radius: 4px;
    display: flex;
  }

  .container2 {
    border: 1px solid rgb(220, 223, 230);
    // border-radius: 4px;
    // display: flex;
    height: 45vh;
    overflow-y: auto;
    background-color: #d5e4fb;
    padding: 5px
  }

  .aside {
    width: 40%;
    // height: 85vh;
    border-right: 1px solid rgb(220, 223, 230);
    // padding: 15px;
    box-sizing: border-box;
    padding: 15px;
    position: relative;
  }

  .main {
    height: 85vh;
    width: 60%;
    padding: 15px;
    flex: 1;
    position: relative;
  }

  .container3 {
    display: flex;
    gap: 10px;
    background-color: #d5e4fb;
    width: 100%;
    height: 100vh;
    padding: 5px
  }

  .container4 {
    padding: 5px;
    background-color: #d5e4fb;
    width: 100%;
    height: 100vh;
  }

  .el-form-item__label-wrap {
    margin-left: 0px !important;
  }

  .demo-image__preview {
    position: relative;

    .el-icon-circle-close {
      position: absolute;
      right: 5px;
      top: 5px;
      z-index: 99;
      font-size: 20px;
      color: white;
      cursor: pointer;
    }
  }

  .fontStyle {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 30px;
  }
}



::v-deep .el-table__body tr.current-row>td {

  background: #a8d6fe !important;
}
</style>
